<!-- 蓝色简洁登录页面 -->
<template>
	<view class="" style="width: 750rpx;overflow: hidden;">
		<view class="t-login" style="height: 100%; overflow: hidden;position: relative;">
			<!-- 页面装饰图片 -->
			<image class="img-a" src="@/static/2.png"></image>
			<!-- <image class="img-b" src="@/static/3.png"></image> -->
			<!-- 标题 -->
			<view class="t-b">{{ title }}</view>
			<view class="cl">
				<view class="t-a">
					<image src="@/static/sj.png"></image>
					<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone" />
				</view>
				<view class="t-a" v-if="!isLogin">
					<image src="@/static/yz.png"></image>
					<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
					<view v-if="showText" style="background: #FA9700;" class="t-c" @tap="getCode()">发送短信</view>
					<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
				</view>
				<view class="t-a" v-if="isLogin">
					<image src="@/static/login_password.png"></image>
					<input type="password" placeholder="请输入密码" v-model="password" />
				</view>
				<view class="login_phone_content" style="display: flex;justify-content: space-between;">
					<view @click="goWangji">忘记密码?</view>
					<view class="login_phone" @click="checkLogin" style="text-align: right;margin-bottom: 20rpx;">
						{{!isLogin?'账号密码登录':'验证码登录'}}
					</view>
				</view>
				<button style="background: #FA9700;" @tap="login()">登 录</button>
			</view>
			<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
			<view class="t-e cl" style="display: flex;">
				<view class="t-g" @tap="wxLogin()">
					<image src="../../static/login_wx.png" mode="aspectFill" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<!-- <view class="t-g" @tap="pingguo()">
					<image src="../../static/login_apple.png" mode="aspectFill" style="width: 60rpx;height: 60rpx;"></image>
				</view> -->
			</view>
			<!-- 隐私详情和用户详情 -->
			<view class="login_bottom">
				<view class="login_bottom_image">
					<image v-if="!isTongFable" @click="changeTong" src="../../static/xuanzhongyuandian.png"
						mode="aspectFill"></image>
					<image v-if="isTongFable" @click="changeTong" src="../../static/xuanzhong.png" mode="aspectFill">
					</image>
				</view>
				<view class="login_bottom_title">
					阅读并同意
				</view>
				<view class="login_bottom_title active" @click="goAreement(1)">
					《用户协议》
				</view>
				<view class="login_bottom_title">
					和
				</view>
				<view class="login_bottom_title active" @click="goAreement(2)">
					《隐私政策》
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		phoneLogin,
		sendSms,
		logins,
		wxRegister,
		appleIdLogin
	} from "@/common/config/request.js"
	import {
		setTokenStorage
	} from '@/utils/token';
	import {
		genTestUserSig
	} from '@/debug/GenerateTestUserSig.js'
	const app = getApp();
	export default {
		/**
		 * 2020年12月1日   李新雷编写（练习）  适用所有app登录
		 * vue版本简洁又美观的登录页面（个人感觉插件市场的登录都不太好看，哈哈 O(∩_∩)O）
		 * 该模板只是登录模板：验证、倒计时等都已经写好，
		 * 如果需要注册（注册可以设计在登录按钮下方），
		 * 直接复制该页面稍微改动即可
		 */
		data() {
			return {
				title: '欢迎来到探锁！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				phone: '', //手机号码
				yzm: '', //验证码
				isLogin: false,
				password: '', //密码
				isTongFable: false,
			};
		},
		onLoad() {},
		methods: {
			// 用户协议，隐私协议
			goAreement(id) {
				if (id == 1) {
					// 用户协议
					uni.navigateTo({
						url: '/pages/public/public?title=用户协议&id=4'
					})
				}
				if (id == 2) {
					// 隐私协议
					uni.navigateTo({
						url: '/pages/public/public?title=隐私协议&id=1'
					})
				}
			},
			goWangji() {
				uni.navigateTo({
					url: '/pages/set/message/ForgotPassword?type=1'
				})
			},
			changeTong() {
				this.isTongFable = !this.isTongFable
			},
			checkLogin() {
				this.isLogin = !this.isLogin
			},
			yzphone() {
				return new Promise((r, n) => {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
						uni.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						});
						return;
					}
					r(true)
				})
			},
			//当前登录按钮操作
			login() {
				// uni.navigateBack({
				// 	delta:1
				// })
				var that = this;
				if (that.isTongFable) {
					if (!that.isLogin) {
						this.yzphone().then((r) => {
							if (r == true) {
								if (!that.yzm) {
									uni.showToast({
										title: '请输入验证码',
										icon: 'none'
									});
									return;
								}
							}
							let data = {
								phone: this.phone,
								code: this.yzm,
								pid: ''
							}
							phoneLogin(data).then((res) => {
								console.log(JSON.stringify(res) + '111111')
								if (res.data.code == 1) {
									uni.showToast({
										title: '登录成功！',
										icon: 'none'
									});
									uni.setStorageSync('userdata', res.data.data)
									uni.setStorageSync('token', res.data.data.token)
									const userID = String(res.data.data.id)
									console.log(res.data.data.token + 'id222')
									console.log(userID + 'id222')
									const userSig = genTestUserSig(userID).userSig
									uni.setStorageSync('userID', userID)
									uni.setStorageSync('userSig', userSig)
									console.log(userID, 'userID')
									// // 腾讯云用户信息
									app.globalData.userInfo = {
										userSig,
										userID,
									}
									setTokenStorage({
										userInfo: app.globalData.userInfo,
									})
									this.getuserinfo.getuserinfo().then((r) => {
										console.log('eeeeeeeee', r)
										if (r.code == 1) {
											if (r.data.pwd) {
												uni.reLaunch({
													url: '/pages/index/index'
												})
											} else {
												uni.reLaunch({
													url: '/pages/set/message/message?type=1&title=设置密码'
												})
											}
										}
									})

								}
							})
						})
					} else {
						let datas = {
							phone: this.phone,
							pwd: this.password,
						}
						logins(datas).then((res) => {
							// console.log(res,'2223')
							if (res.data.code == 1) {
								uni.showToast({
									title: '登录成功！',
									icon: 'none'
								});
								uni.setStorageSync('userdata', res.data.data)
								uni.setStorageSync('token', res.data.data.token)
								const userID = String(res.data.data.id)
								const userSig = genTestUserSig(userID).userSig
								uni.setStorageSync('userID', userID)
								uni.setStorageSync('userSig', userSig)
								// // 腾讯云用户信息
								app.globalData.userInfo = {
									userSig,
									userID,
								}
								setTokenStorage({
									userInfo: app.globalData.userInfo,
								})
								// uni.navigateBack({
								// 	delta:1
								// })	
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						})
					}

				} else {
					uni.showToast({
						icon: 'none',
						title: '请同意用户协议或隐私协议'
					})
				}

			},
			djs() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
			},
			//获取短信验证码
			getCode() {
				this.yzphone().then((r) => {
					if (r == true) {
						sendSms({
							phone: this.phone
						}).then((res) => {
							console.log(res)
							if (res.data.code == 1) {
								this.djs()
							}

						})
					}
				})


				//这里请求后台获取短信验证码


				// uni.request({
				// 	//......//此处省略
				// 	success: function(res) {
				// 		that.showText = false;
				// 	}
				// });
			},
			//等三方微信登录
			wxLogin() {
				if (this.isTongFable) {
					console.log('2222222')
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									let data = {
										openid: loginRes.authResult.openid,
										avatar: infoRes.userInfo.avatarUrl,
										nickname: infoRes.userInfo.nickName,
										sex: infoRes.userInfo.gender == 0 ? 1 : 0,
									}
									// console.log(data,'微信登录')
									wxRegister(data).then((res) => {
										console.log(res, '登录')
										if (res.data.code == 1) {
											uni.showToast({
												title: '登录成功！',
												icon: 'none'
											});
											uni.setStorageSync('userdata', res.data.data)
											uni.setStorageSync('token', res.data.data
												.token)
											const userID = String(res.data.data.id)
											const userSig = genTestUserSig(userID).userSig
											uni.setStorageSync('userID', userID)
											uni.setStorageSync('userSig', userSig)
											// 腾讯云用户信息
											app.globalData.userInfo = {
												userSig,
												userID,
											}
											setTokenStorage({
												userInfo: app.globalData.userInfo,
											})
											if (res.data.data.is_phone == 0) {
												// console.log('33333333')
												uni.navigateTo({
													url: '/pages/login/bindPhone'
												})
											} else {
												uni.reLaunch({
													url: '/pages/index/index'
												})
											}
										}
									})
									// console.log('用户昵称为：' +JSON.stringify(infoRes.userInfo));
								}
							});
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '请同意用户协议或隐私协议'
					})
				}
			},
			//第三方苹果登录
			pingguo() {
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						// 登录成功  
						uni.getUserInfo({
							provider: 'apple',
							success(res) {
								// 获取用户信息成功  
								// console.log(loginRes,'123456')
								// console.log(res,'7899877')
								var data = {
									nickname: res.userInfo.fullName.familyName,
									identityToken: res.userInfo.identityToken,
									appleID: res.userInfo.openId,
									pid: '',
								}
								console.log(data, '666666')
								appleIdLogin(data).then(res => {
									console.log(res, '4444444444444')
									if (res.data.code == 1) {
										uni.showToast({
											title: '登录成功！',
											icon: 'none'
										});
										uni.setStorageSync('userdata', res.data.data)
										uni.setStorageSync('token', res.data.data
											.token)
										const userID = String(res.data.data.id)
										const userSig = genTestUserSig(userID).userSig
										uni.setStorageSync('userID', userID)
										uni.setStorageSync('userSig', userSig)
										// 腾讯云用户信息
										app.globalData.userInfo = {
											userSig,
											userID,
										}
										setTokenStorage({
											userInfo: app.globalData.userInfo,
										})
										if (res.data.data.is_phone == 0) {
											// console.log('33333333')
											uni.navigateTo({
												url: '/pages/login/bindPhone'
											})
										} else {
											uni.reLaunch({
												url: '/pages/index/index'
											})
										}
									}
								})
							}
						})
					},
					fail: function(err) {
						// 登录失败  
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.img-a {
		position: absolute;
		width: 100%;
		top: -280rpx;
		right: -100rpx;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		margin-bottom: -200rpx;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		// float: left;
		width: 50%;
		margin: auto
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	// 用户协议与隐私协议
	.login_bottom {
		width: 100%;
		// width: 750rpx;
		height: 60rpx;
		// position: fixed;
		// left: 0;
		// bottom: 19rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		// padding: 0rpx 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.login_bottom_image {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
				margin-top: 5rpx;
			}
		}

		.login_bottom_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.active {
			font-size: 30rpx;
			color: #333333;
		}
	}
</style>
